var g_canvas, g_context;

function createGradient()
{
    var gradient = g_context.createRadialGradient( 200, 200, 50, 200, 200, 200 );
    gradient.addColorStop( 0, "#ff0000"  );
    gradient.addColorStop( 0.1, "#ffa500" );
    gradient.addColorStop( 0.2, "#ffff00" );
    gradient.addColorStop( 0.3, "#00ff00" );
    gradient.addColorStop( 0.4, "#42aaff" );
    gradient.addColorStop( 0.5, "#0000ff" );
    gradient.addColorStop( 0.6, "#8b00ff" );
    g_context.fillStyle = gradient;
    g_context.fillRect( 0, 0, 400, 400 );
}

function onloadHandler()
{
    g_canvas = document.getElementById('canvas');
    g_context = g_canvas.getContext('2d');

    createGradient();
}

window.onload = onloadHandler;    